<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="../static/userinfoPrivate/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="../static/userinfoPrivate/css/thesame.css" media="all">
	<link rel="stylesheet" href="../static/userinfoPrivate/css/headCss.css" media="all">
	<link rel="stylesheet" href="../static/userinfoPrivate/userinfo/css/tree.css" media="all">
	<link rel="stylesheet" href="../static/userinfoPrivate/userinfo/css/rightCon.css" media="all">
	<link rel="stylesheet" href="../static/userinfoPrivate/userinfo/css/page.css" media="all">
	<link rel="stylesheet" href="../static/userinfoPrivate/userinfo/css/popCss.css" media="all">
</head>
<style type="text/css">
	.pop-form-span .layui-input-block > .layui-btn{ height: 36px; line-height: 36px; float: left }
	.pop-form-span .layui-input-block .layui-upload-choose {
	    padding: 0 10px;
	    color: #999;
	    background-color: transparent;
	}
	.add-mess-child > div:nth-child(1) {
	    width: 49px;
	    text-align: left;
	}
</style>

<body class="layui-layout-body">
	<div class="layui-body ">
		<!-- 内容主体区域 -->
		<div class="bgWhite box-shadows1 border-radius4 scroll-box">
			<div class="scroll-box-con border-radius4 bgWhite">
				<div class="border-bot1px pb20px mb20px">
					<div class="add-mess">
						 <div class="add-mess-child left">
							<div>
								<label>小区：</label>
							</div>
							<div class="add-mess-form">
								<p class="add-mess-form-tree"><input readonly="readonly" style="border: 0" id="registerAreaOfResidence" value="" text="" type="text" placeholder="请选择" class="layui-input form-select"></p>
								<div class="tree-con-box" id="registerAreaOfResidenceDiv">
								</div>
							</div>
						</div>
						<div class="left">
							<!-- <span onclick="query()" class="white border-radius4 bgGreen block pl20px pr20px ml30px lh34px cursor">查&nbsp;询</span> -->
							<shiro:hasPermission name="piliangdaoru_imp">
				  				<span onclick="layerOpenOfImport()" class="white border-radius4 bgGreen block pl15px pr15px ml30px lh34px cursor"><img src="../static/userinfoPrivate/userinfo/img/button_dr.png" style="vertical-align: 0" class="mr5px">导入居民信息</span>
							</shiro:hasPermission>
						</div> 
					</div>
				</div>
				<div class="more-table-con clear relative">
					<div class="mb15px">
						<span style="color: #666">导入居民信息：</span>
						<span style="color: #999">导入居民信息操作提示：请先选择居民户籍所在小区，选择查询完成定位，然后点击"导入居民信息"进行批量导入</span>
					</div>
					<div class="mb20px lh32px overflow add-btn-input">
						<p class="left cursor">
							
						</p>

						<div class="right">共有<span id="totalNum" class="red"> </span>条数据</div>
					</div>
					<div class="border1px border-radius4">
						<table class="layui-hide" id="test" lay-filter="test"></table>
						
					</div>
				</div>
			</div>
		</div>
	</div>


	<div id="pop-con" style="display: none;">
		<div class="pop-up">
			<div>
				<div class="pop-title relative overflow mb15px">
					<span class="ml15px">导入老人信息档案</span>
					<p class="right"><img src="../static/userinfoPrivate/img/close_icon.png" class="block pop-close"><p>
				</div>
				<div class="pop-form pop-form-span mt30px mb30px">
					<div class="layui-form-item">
						<label class="layui-form-label">导入文件</label>
						<div class="layui-input-block">
							<button type="button" class="layui-btn layui-btn-normal" id="choseFileButton">选择文件</button>
							<!-- <span onclick="importFileClick()">选&nbsp;择</span> -->
							<!-- <span id="fileName"></span> -->
						</div>
						<!-- <input type="file" style="display:none" name="file" id="uploadFile"/> -->
					</div>
					<div class="layui-form-item">
				       	<label class="layui-form-label">导入模板</label>
				       	<div class="layui-input-block ">
					        <span  class="current" onclick="importTempleFile()">下载导入模板</span>
					    </div> 
				    </div>
					<div class="layui-form-item">
				       	<label class="layui-form-label">导入规则</label>
				       	<div class="layui-input-block layui-input-block-two">
					        <span value="1" class="current">只导增量</span>
					        <span value="2">覆盖原有数据</span>
				       	</div> 
				    </div>
				</div>
				<div class="btn-con textCenter">
					<span class="btn-one cursor" onclick="cancel()">取&nbsp;消</span>
					<span class="btn-two cursor"  id="confirmButton" >提&nbsp;交</span>
				</div>
			</div>
		</div>
	</div>
<script src="../static/userinfoPrivate/js/jquery-2.1.3.min.js"></script>
<script src="../static/userinfoPrivate/layui/layui.js" charset="utf-8"></script>
<script src="../static/userinfoPrivate/userinfo/js/treeTwo.js"></script>
<!-- <script src="../static/userinfoPrivate/userinfo/js/treeFour.js"></script> -->
<script>
	
	$(function(){
		
		$('div.layui-input-block-two span').click(function(){
	    	$(this).addClass('current').siblings().removeClass('current');
	   	});


		
		//导入文件
		layui.use('upload', function(){
			var upload = layui.upload;
			//选完文件后不自动上传
		  	upload.render({
		    	elem: '#choseFileButton'
		    	,url: '../userInfo/importReport' //改成您自己的上传接口
		    	,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
				    layer.load(); //上传loading
				}
		    	,auto: false
		    	,accept: 'file'
		    	,bindAction: '#confirmButton'
		    	,exts:'xls|xlsx'
		    	,data:{
		    		//增加或者覆盖 1-增加 2-覆盖
		    		addOrCover:function(){
		    			// console.log($(".layui-input-block-two .current").attr("value"));
		    			return $(".layui-input-block-two .current").attr("value");
		    		}
		    		,
		    		orgId:function(){
		    			return registerAreaOfResidenceValue;
		    		}

		    	}
		    	,done: function(res){
		    		console.log(res);
		    		if (res.code==200) {
		    			layer.closeAll();
		    			layer.msg('上传成功,'+res.msg, {icon: 1},function(){
		    				query();
		    			});

		    		}else{
		    			layer.closeAll();
		    			layer.msg(res.msg, {icon: 2});
		    		}
		    	}
		  	});
		})


		//查询
		query();

		getOrganization();
	})




	//获取组织架构
	function getOrganization(){

		var formDate =
            {	
            };

        $.ajax({
            url: "../userInfo/getOrganization",
            type: "get",
            dataType: "json",
            data: formDate,
            async: false,
            success: function (res) {
				// console.log(res);
                if (res.code == "200") {
					var organizationList = res.data.children;
					//行政区
					var registerAreaOfResidenceDivStr = getOrganizationDivStr(organizationList,1);

					$("#registerAreaOfResidenceDiv").html(registerAreaOfResidenceDivStr);
					//初始化
					init();
                }else{
                	layer.msg(res.msg, {icon: 2,time:1500});
                }
            }
        });
	}


	var registerAreaOfResidenceValue = "";
	var liveAreaOfResidenceValue = "";
	function organizationChangeQuery(obj,registerOrLive){
		var orgId = $(obj).data("orgid");
		var orgName = $(obj).data("orgname");
		
		if (10 == orgId) {
			$("#registerAreaOfResidence").val("");
			$("#registerAreaOfResidence").text("");
			orgId="";
		}else{
			$("#registerAreaOfResidence").val(orgName);
			$("#registerAreaOfResidence").text(orgName);
		}
		
		registerAreaOfResidenceValue = orgId;
		
		//hide
		$('#registerAreaOfResidenceDiv').hide();
	}


	function getOrganizationDivStr(organizationList,registerOrLive){

		var str="";
		var whichFloor = 1;
		var uLHasNum = switchCss(whichFloor);
		str+="<ul class="+uLHasNum+">";
		$.each(organizationList,function(key,rog1){
    		
			str+='<li>';
			str+='<div class="tree-children" >';
			str+='<div>';

			str+="<p class='tree-arrow cursor'><img src='../static/userinfoPrivate/userinfo/img/icon_select_up.png'></p>"
			str+='<p data-orgid="'+rog1.orgId+'" data-orgname="'+rog1.orgName+'" onclick="organizationChangeQuery(this,'+registerOrLive+')">'+rog1.orgName+'</p>';
			str+='</div>';
			str+='</div>';
			
			if ( rog1.isChildExist=='1' &&!isNull(rog1.children)  && rog1.children.length>0) {
			str+=splicingMainStr(rog1,whichFloor,registerOrLive);
			}
			str+='</li>';
		});
		str+='</ul>';


		return str;
	}

	//拼接
	function splicingMainStr(rog1,whichFloor,registerOrLive){
		// console.log("registerOrLive="+registerOrLive);
		var str = "";
		if(rog1.isChildExist=='1' && !isNull(rog1.children) && rog1.children.length>0){
			whichFloor = whichFloor+1;
			var uLHasNum = switchCss(whichFloor);

			str+='<ul class=" '+uLHasNum+'">';

			$.each(rog1.children,function(key,rog2){
				if(rog2.isChildExist=='1' && !isNull(rog2.children) && rog2.children.length>0){
					str+='<li>';
					str+='<div class="tree-children">';
					str+='<div>';
					str+="<p class='tree-arrow cursor'><img src='../static/userinfoPrivate/userinfo/img/icon_select_up.png'></p>"
					str+='<p data-orgid="'+rog2.orgId+'" data-orgname="'+rog2.orgName+'" onclick="organizationChangeQuery(this,'+registerOrLive+')">'+rog2.orgName+'</p>';
					str+='</div>';
					str+='</div>';
					str+=splicingMainStr(rog2,whichFloor,registerOrLive);
					str+='</li>';
				}else{
					if(!isNull(rog2)){
						str+=splicingStr(rog2,registerOrLive,registerOrLive);
					}
				}
			})
			str+='</ul>';

		}else{
			if(!isNull(rog1)){
				str+=splicingStr(rog1,registerOrLive,registerOrLive);
			}
		}
		return str;
	}



	//拼接
	function splicingStr(org,registerOrLive){
		var str ="";
		//是否是行政机构 0-否，1-是    type 是否实际勾选 1-是 0-否
		str+='<li>';
		str+='<div class="tree-children">';
		str+='<div>';
		str+='<p data-orgid="'+org.orgId+'" data-orgname="'+org.orgName+'" onclick="organizationChangeQuery(this,'+registerOrLive+')">'+org.orgName+'</p>';
		str+='</div>';
		str+='</div>';
		str+='</li>';
		return str;
	}





	//层级转换标签
	function switchCss(whichFloor){

		var uLHasNum = "";

		switch (whichFloor) {
		  case 1:
		    uLHasNum = "tree-one";
		    break;
		  case 2:
		    uLHasNum = "tree-two";
		    break;
		  case 3:
		    uLHasNum = "tree-three";
		    break;
		  case 4:
		    uLHasNum = "tree-four";
		    break;
		  case 5:
		    uLHasNum = "tree-five";
		}
		return uLHasNum;
	}




	//查询
	function query(){	
		//左侧菜单栏
		layui.use(['element', 'table','layer'], function() {
			var layer = layui.layer;
			var table = layui.table;

			var formDate =
	            {	
	            	orgId:registerAreaOfResidenceValue
	            };

			//第一个实例	
			table.render({
				elem: '#test'//,url: '/demo/table/user/'
				,url:"../userInfo/getReportRecordList"
				,where:formDate
				,request: {
					 pageName: 'currentPage' //页码的参数名称，默认：page
					 ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
				}
				//,count: 10  //数据总数，从服务端得到
				//,data: listData
				,page: true //开启分页
				,limit:10 //每页显示的条数
				//,limits:[3,4,5]
				,groups: 9 //连续页码个数
				,parseData:function(res){
					// console.log(res);
					return{
						"code":res.code,
						"data":res.data.data,
						"count":res.data.totalCount,
						"limit":res.data.pageSize,
					};
				}
				,cols: [
					[ //表头
						{
							field: 'id',
							title: '编号',
							fixed: 'left',
							type: 'numbers',
							width:100
						}, {
							field: 'formatCreateTime',
							title: '导入时间',
						}, {
							field: 'formatReportTypeName',
							title: '导入类型',
						}, 
						// {
						// 	field: 'formatOrgName',
						// 	title: '机构名称',
						// }, 
						{
							field: 'reportName',
							title: '导入文件',
							templet:function(res){
								return '<div class="green cursor" onclick="getOriginalExcel(\''+res.id+'\')">'+res.reportName+'</div>';
							}
						}, {
							field: 'sysName',
							title: '操作员',
						}, {
							field: 'importResult',
							title: '导入结果',
							width:350,
							templet: function(res){
								if (res.failCount ==0) {
									return '<div><span>成功导入<em class="blue">'+res.successCount+' </em>条记录，</span><span>失败<em class="red">'+res.failCount+' </em>条，</span><span>查看<em>错误日志</em></span></div>'
								}else{
									return '<div><span>成功导入<em class="blue">'+res.successCount+' </em>条记录，</span><span>失败<em class="red">'+res.failCount+' </em>条，</span><span>查看<em onclick="getErrorLogExcel(\''+res.id+'\')" class="green cursor">错误日志</em></span></div>'
								}
							}
						}
					]
				]
				,done:function(res, curr, count){
				    $("#totalNum").text(count);
				}
			});
			
		});


	}


	//导入模板
	function importTempleFile(){
		window.location.href="../userInfo/getUserInfoReportTemplate";
	}

	//错误日志下载
	function getErrorLogExcel(reportId){
		// console.log(reportId);
		window.location.href="../userInfo/getErrorLogUserInfoExcel?reportId="+reportId;
	}

	//获取原始的excel
	function getOriginalExcel(reportId){
		window.location.href="../userInfo/getOriginalExcelUserInfo?reportId="+reportId;
	}


	//导入弹层
	function layerOpenOfImport(){
		layer.open({
			type: 1,
			title: false, //不显示标题栏
			closeBtn: false,
			area: ['$("div#pop-con")', ''],
			shade: 0.6,
			id: 'payCons', //设定一个id，防止重复弹出
			/*,btn: ['确认支付']*/
			btnAlign: 'c',
			moveType: 1, //拖拽模式，0或者1
			shadeClose: true, //设置允许点遮罩关闭
			content: $("div#pop-con"),
			success: function() {
				//关闭弹层
				$(".pop-close").click(function() {
					layer.closeAll();
				});
			},
	
		});
	}




	//判断是否有文件
	// $("#confirmButton").click(function(){
	// 	var fileName = $(".layui-inline layui-upload-choose").text();
	// 	if (isNull(fileName)) {
	// 		layer.msg('请选择文件', {time: 2000});
	// 		return;
	// 	}

	// 	if (isNull(registerAreaOfResidenceValue)) {
	// 		layer.msg("请选择小区", {icon: 2});
	// 		return;
	// 	}
	// })

		
	
		


	//取消
	function cancel(){
		layer.closeAll();
	}

	function isNull(value) {
		return value == null || value === "" || value === undefined;
	}

</script>
</body>

</html>
